<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:v-bind="http://www.w3.org/1999/xhtml" lang="ch">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="author" content="Nghia Minh Luong">
<meta name="keywords" content="Default Description">
<meta name="description" content="Default keyword">
<title>遵师表白</title>
<!-- Fonts-->
<link rel="stylesheet" th:href="@{/static/css/fontsgoogleapis.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/font-awesome/css/font-awesome.min.css}">
<link rel="stylesheet" th:href="@{/static/plugins/ps-icon/style.css}">
<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" />
<link rel="stylesheet"
	th:href="@{/static/plugins/bootstrap/dist/css/bootstrap.min.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/owl-carousel/assets/owl.carousel.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/jquery-bar-rating/dist/themes/fontawesome-stars.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/slick/slick/slick.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/bootstrap-select/dist/css/bootstrap-select.min.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/Magnific-Popup/dist/magnific-popup.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/jquery-ui/jquery-ui.min.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/revolution/css/settings.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/revolution/css/layers.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/revolution/css/navigation.css}">
<link rel="stylesheet" th:href="@{/static/css/style.css}">
<link rel="stylesheet" th:href="@{/static/css/gooddetail.css}">

<link rel="stylesheet" th:href="@{/static/css/confession.css}">


<link rel="stylesheet" type="text/css"
	th:href="@{/static/font-awesome/css/font-awesome.css}" />
<script type="text/javascript"
	th:src="@{/static/plugins/jquery/dist/jquery.min.js}"></script>
<script th:src="@{/static/js/html5shiv.js}"></script>
<script th:src="@{/static/js/respond.min.js}"></script>
<script th:src="@{/static/js/vue.js}"></script>
<script src="/static/layui/layui.js"></script>
<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    //,anim: 'updown' //切换动画方式
  });
});
</script>
<script th:inline="javascript">
        var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
    </script>
</head>
<body class="ps-loading">
	<div class="header--sidebar"></div>
	<header class="header">
		<div th:include="~{index :: myheader}"></div>
	</header>
	<div class="header-services">
		<div th:include="~{index :: myhdservices}"></div>
	</div>

	<div id="lovestory" style="width:100%;">
		
		<div style="float: left;width:400px;">
			<h2 class="hot-title">
				最热告白<a href="" class="hot-icon">hot</a>
			</h2>
			<div class="modle" v-for="loves in loves">
			<div class="modle1">
				<ul class="hot-house-wrap">

					<li class="hot-house-li"><a href="">
							<div class="pic-wrap">
								<img alt="最佳情侣" th:src="@{/static/images/background/rent.jpg}">
							</div>
							<div class="detail-info" style="height: 81px;">
								<h3>{{loves.username}}&nbsp;&nbsp;*&nbsp;&nbsp;{{loves.department}}</h3>
								<div class="house-type">{{loves.publish_time}}&nbsp;&nbsp;&nbsp;&nbsp;热度值:{{loves.give_like}}</div>
								<div class="price">{{loves.statement}}</div>
							</div>
					</a></li>
				</ul>
			</div>
		</div>
		</div>
	
		<div class="neirong" >
			
			<!--容纳动态内容-->
			<div class="fdt">
				<p
					style="color: brown; font-family: '微软雅黑'; font-weight: bold; font-size: 16px; margin-left: 15px;">朋友动态：
				<p>
				<div style="height:800px;overflow:auto;">
				<div v-for="saying in sayings">
				<div class="kk">
					<img alt="头像" th:src="@{/static/images/background/bxh.jpg}"><br>
					<p class="nicheng">{{saying.username}}</p>
					<p class="time">{{saying.publish_time}}&nbsp;&nbsp;&nbsp;热度值:{{saying.give_like}}</p>
					<br>
					<p class="text">{{saying.statement}}</p>
					
					<div class="anniu" >
					<i class="layui-icon layui-icon-praise" ></i>  
					<i class="layui-icon layui-icon-star" ></i>  
					<i class="layui-icon layui-icon-dialogue"></i>  
					<i class="layui-icon layui-icon-release"></i>  
					
					</div>
				</div>
				</div>
				</div>
			</div>
		</div>
		<div class="aboutmy">

			<h2 class="hot-titles">
				模范情侣<a href="" class="hot-icon">hot</a>
			</h2>
			<div class="modle2" v-for="modle in modles">
				<ul class="hot-house-wrap" >

					<li class="hot-house-li"><a href="">
							<div class="pic-wrap">
								<img alt="模范" th:src="@{/pic/d.jpg}">
							</div>
							<div class="detail-info" style="height: 81px;">
								<h3>{{modle.username1}}&nbsp;&nbsp;*&nbsp;&nbsp;{{modle.username2}}</h3>
								<div class="house-type">{{modle.lovingtime}}&nbsp;&nbsp;&nbsp;&nbsp;{{modle.loving}}</div>
								<div class="price">模范情侣第{{modle.level}}名</div>
							</div>
					</a></li>
				</ul>
				
			</div>
			<div class="modle2" v-for="modle in modless">
				<ul class="hot-house-wrap" >

					<li class="hot-house-li"><a href="">
							<div class="pic-wrap">
								<img alt="模范" th:src="@{/pic/b.jpg}">
							</div>
							<div class="detail-info" style="height: 81px;">
								<h3>{{modle.username1}}&nbsp;&nbsp;*&nbsp;&nbsp;{{modle.username2}}</h3>
								<div class="house-type">{{modle.lovingtime}}&nbsp;&nbsp;&nbsp;&nbsp;{{modle.loving}}</div>
								<div class="price">模范情侣第{{modle.level}}名</div>
							</div>
					</a></li>
				</ul>
				
			</div>
		
		</div>
	
</div>







	<div class="ps-footer bg--cover"
		data-background="images/background/parallax.jpg"
		style="float: left; width: 100%;">
		<div class="ps-footer__content">
			<div class="ps-container">
				<div class="row">
					<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
						<aside class="ps-widget--footer ps-widget--info">
							<header>
								<a class="ps-logo" th:href="@{/}"><img
									th:src="@{/static/images/logo-white.png}" alt=""></a>
								<h3 class="ps-widget__title">Address Office 1</h3>
							</header>
							<footer>
								<p>
									<strong>460 West 34th Street, 15th floor, New York</strong>
								</p>
								<p>
									Email: <a href='mailto:support@store.com'>support@store.com</a>
								</p>
								<p>Phone: +323 32434 5334</p>
								<p>Fax: ++323 32434 5333</p>
							</footer>
						</aside>
					</div>
					<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
						<aside class="ps-widget--footer ps-widget--info second">
							<header>
								<h3 class="ps-widget__title">Address Office 2</h3>
							</header>
							<footer>
								<p>
									<strong>PO Box 16122 Collins Victoria 3000 Australia</strong>
								</p>
								<p>
									Email: <a href='mailto:support@store.com'>support@store.com</a>
								</p>
								<p>Phone: +323 32434 5334</p>
								<p>Fax: ++323 32434 5333</p>
							</footer>
						</aside>
					</div>
					<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
						<aside class="ps-widget--footer ps-widget--link">
							<header>
								<h3 class="ps-widget__title">Find Our store</h3>
							</header>
							<footer>
								<ul class="ps-list--link">
									<li><a href="#">Coupon Code</a></li>
									<li><a href="#">SignUp For Email</a></li>
									<li><a href="#">Site Feedback</a></li>
									<li><a href="#">Careers</a></li>
								</ul>
							</footer>
						</aside>
					</div>
					<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
						<aside class="ps-widget--footer ps-widget--link">
							<header>
								<h3 class="ps-widget__title">Get Help</h3>
							</header>
							<footer>
								<ul class="ps-list--line">
									<li><a href="#">Order Status</a></li>
									<li><a href="#">Shipping and Delivery</a></li>
									<li><a href="#">Returns</a></li>
									<li><a href="#">Payment Options</a></li>
									<li><a href="#">Contact Us</a></li>
								</ul>
							</footer>
						</aside>
					</div>
					<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
						<aside class="ps-widget--footer ps-widget--link">
							<header>
								<h3 class="ps-widget__title">Products</h3>
							</header>
							<footer>
								<ul class="ps-list--line">
									<li><a href="#">Shoes</a></li>
									<li><a href="#">Clothing</a></li>
									<li><a href="#">Accessries</a></li>
									<li><a href="#">Football Boots</a></li>
								</ul>
							</footer>
						</aside>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- </main> -->
	<!-- JS Library-->
	<script type="text/javascript"
		th:src="@{/static/plugins/bootstrap/dist/js/bootstrap.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/jquery-bar-rating/dist/jquery.barrating.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/owl-carousel/owl.carousel.min.js}"></script>
	<script type="text/javascript" th:src="@{/static/plugins/gmap3.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/imagesloaded.pkgd.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/isotope.pkgd.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/bootstrap-select/dist/js/bootstrap-select.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/jquery.matchHeight-min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/slick/slick/slick.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/elevatezoom/jquery.elevatezoom.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/Magnific-Popup/dist/jquery.magnific-popup.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/jquery-ui/jquery-ui.min.js}"></script>
	<script type="text/javascript" th:src="@{/static/js/ditugoogle.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/jquery.themepunch.tools.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/jquery.themepunch.revolution.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.video.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.slideanims.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.layeranimation.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.navigation.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.parallax.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.actions.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.kenburn.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.migration.min.js}"></script>
	<!-- Custom scripts-->
	<script type="text/javascript" th:src="@{/static/js/main.js}"></script>
	<script type="text/javascript" th:src="@{/static/js/timeago.js}"></script>
	<script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
	<script type="text/javascript" th:src="@{/static/js/confession.js}"></script>


</body>
</html>
